<template>
<div class="All">
    <span :class="Dis===0?'Active':''" @click="fun0()">限时秒杀</span>
    <span :class="Dis===1?'Active':''" @click="fun1()">每日特价</span>
    <span :class="Dis===2?'Active':''" @click="fun2()">品牌秒杀</span>
</div>
</template>

<script setup>
    import { ref } from 'vue';
    let Dis=ref(0);
    let fun0=()=>{
        Dis.value=0;
    }
    let fun1=()=>{
        Dis.value=1;
    }   
    let fun2=()=>{
        Dis.value=2;
    }
</script>

<style scoped>
    .Active
    {
        background-color: red;
        color: white;
    }
    span{
        border-bottom: 2px solid red;
        border-top:1px solid grey;
        height: 50px;
        width: 200px;
        text-align: center;
        align-content: center;
    }
    .All{
        display: flex;
        justify-content: center;
    }
</style>